<template>
	<view class="notice">
		<view class="notice-item" style="margin-bottom: 0;">
			<view>
				<image
					src="https://cdn7.axureshop.com/demo/1996612/images/%E7%A4%BE%E5%8C%BA%E5%85%AC%E5%91%8A/u8220.svg"
					mode="scaleToFill" />
				<text>设为已读</text>
			</view>
		</view>

		<Card20 :isBorder="true" v-for="item in suggest" :title="item.title" class="mt-2" @click="notDetails">
	
			<view class="notice-Dian"></view>

			<template v-slot:main-title>
				<image style="width: 30rpx;margin-top: -10rpx;margin-right: 10rpx;"
					src="https://cdn7.axureshop.com/demo/1996612/images/%E7%A4%BE%E5%8C%BA%E5%85%AC%E5%91%8A/u8207.svg" />
			</template>
			<template v-slot:main>
				<view style="margin: 5rpx 0;">{{ item.main }}</view>
			</template>
			<template v-slot:fu-icon>
				<image src="../../static/image/箭头.png" mode="scaleToFill"
					style="width: 30rpx ; height: 30rpx;vertical-align: middle;margin-top: -10rpx;" />
			</template>
			<template v-slot:floot-left>
				<view class="rep-foot">
					<view class="rep-foot-item">
						<text>{{ item.flootLeft }}</text>
					</view>
				</view>
			</template>
			<template v-slot:floot-right>
				<view class="rep-foot">
					<view class="rep-foot-item">
						<text>{{ item.flootRight }}</text>
					</view>
				</view>
			</template>
			
		</Card20>

		
	</view>
</template>

<script setup>
import { ref } from 'vue';
import Card20 from '../../components/card-2.0.vue';
let suggest = ref([
	{
		title: "充值送费活动",
		main: "明日起，实施充值满赠活动，充值饮水卡满200送30，活动持续一周。",
		flootLeft: "2022-02-1218:25:47",
		flootRight: "花园国际小区物业服务处"
	},
	{
		title: "五一劳动节活动",
		main: "为拓展广大业主业余活动，物业服务处将举办五一劳动节活动，望广大业主积极参与，增进邻居感情。",
		flootLeft: "2022-02-1218:25:47",
		flootRight: "花园国际小区物业服务处"
	},
])
let notDetails = () => {
	uni.navigateTo({
		url: "/pages/notice/components/noticeDetails/noticeDetails"
	})
}
</script>

<style scoped lang="scss">
.notice-Dian{
	width: 15rpx;
	height: 15rpx;
	background-color: red;
	border-radius: 50%;
	position: absolute;
	right:0rpx;
	top: -10rpx;
	z-index: 999;
}
.notice {
	height: calc(100vh - 90rpx);
	background-color: #f5f5f5;
	overflow: hidden;
	color: #909090;
	font-size: 24rpx;
}

.notice-item {
	height: 60rpx;
	line-height: 60rpx;
	font-size: 24rpx;	
	color: #909090;
	display: flex;
	margin-right: 30rpx;
	justify-content: flex-end;

	image {
		width: 30rpx;
		height: 30rpx;
		vertical-align: middle;
		margin-right: 10rpx;
		margin-top: -10rpx;
	}
}

.mt-2 {
	padding-top: 20rpx;
	font-size: 24rpx;
	position: relative;

	image {
		width: 60rpx;
		height: 60rpx;
		vertical-align: middle;
	}
}

.rep-foot {
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: space-between;
	font-size: 22rpx;

	.rep-foot-item {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 80rpx;
		align-items: center;
		justify-content: center;

		image {
			width: 40rpx;
			height: 40rpx;
			vertical-align: middle;
		}
	}
}
</style>
